<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TREE 级联选择</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="../.package/css/sui.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <link rel="shortcut icon" href="assets/ico/favicon.png">
    <script src="../js/lib/jquery.js"></script>
    <script src="../.package/js/sui.js"></script>
    <!--[if lt IE 9]><script src="assets/js/html5shiv.js"></script><![endif]-->
    <style>
      .bs-docs-example{font-size:12px;}
      .sui-tree-group > select + select{margin-left:5px;}
      
    </style>
  </head>
  <body>
        <div class="sui-navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="sui-container"><a href="./index.html" class="sui-brand"><i class="sui-icon icon-github-alt">&nbsp;</i>WQUI</a>
              <ul class="sui-nav">
                <li><a href="./index.html">首页</a></li>
                <li class="active"><a href="./global.html">组件库</a></li>
                <li><a href="./examples.html">案例</a></li>
                <li><a href="./tutorial.html">教程</a></li>
                <li><a href="./download.html">下载</a></li>
                <li><a href="./about.html">关于</a></li>
              </ul>
            </div>
          </div>
        </div>
    <div class="sui-layout">
      <div class="sidebar">
            <ul class="sui-nav nav-tabs nav-stacked nav-xlarge docs-sidenav">
              <li><a href="global.html"><i class="sui-icon icon-globe">&nbsp;</i>全局样式</a>
              </li>
              <li><a><i class="sui-icon icon-magic">&nbsp;</i>基础css<i class="sui-icon icon-angle-down pull-right"></i></a>
                <ul class="sui-nav nav-tabs nav-stacked">
                  <li><a href="buttons.html">按钮</a></li>
                  <li><a href="forms.html">表单</a></li>
                  <li><a href="icons.html">图标</a></li>
                </ul>
              </li>
              <li><a><i class="sui-icon icon-picture">&nbsp;</i>css组件<i class="sui-icon icon-angle-down pull-right"></i></a>
                <ul class="sui-nav nav-tabs nav-stacked">
                  <li><a href="msgs.html">提示消息</a></li>
                  <li><a href="steps.html">步骤条</a></li>
                  <li><a href="tab.html">标签页</a></li>
                  <li><a href="breadcrumb.html">面包屑</a></li>
                  <li><a href="pagination.html">分页器</a></li>
                  <li><a href="dropdown.html">下拉菜单</a></li>
                  <li><a href="progress.html">进度条</a></li>
                  <li><a href="loading.html">Loading</a></li>
                </ul>
              </li>
              <li class="active"><a><i class="sui-icon icon-shopping-cart">&nbsp;</i>js组件<i class="sui-icon icon-angle-down pull-right"></i></a>
                <ul class="sui-nav nav-tabs nav-stacked">
                  <li><a href="dialog.html">对话框</a></li>
                  <li><a href="tooltip.html">tooltip</a></li>
                  <li><a href="tab-js.html">标签页</a></li>
                  <li><a href="pagination-js.html">分页器</a></li>
                  <li><a href="dropdown-js.html">下拉菜单</a></li>
                  <li class="active"><a href="tree-js.html">级联选择</a></li>
                  <li><a href="datepicker.html">datepicker</a></li>
                </ul>
              </li>
            </ul>
      </div>
      <div class="content">
        <div class="content-inner">
          <div class="sui-page-header">
            <h1>级联选择<small>&nbsp;&nbsp;Tree</small></h1>
          </div>
          <p class="docs">
            根据给定的数据生成下拉框，并且能够级联选择，并取到相应的数据。<br>
            修改日志：由原来的一次性获取所有数据改为只获取第一级数据，后面的数据在选中某个节点后获取，并且移除了source参数
          </p>
          <h1>1. select，通过标记自动初始化</h1>
          <ul class="sui-nav nav-tabs nav-large">
            <li class="active"><a href="#demo1" data-toggle="tab">示例</a></li>
            <li><a href="#code1" data-toggle="tab">代码</a></li>
            <li><a href="#doc1" data-toggle="tab">文档</a></li>
            <li><a href="#api1" data-toggle="tab">API</a></li>
          </ul>
          <div class="tab-content">
            <div id="demo1" class="tab-pane active">
              <div class="bs-docs-example">
                <form class="sui-form">
                  <div data-toggle="tree" data-src="http://10.68.111.150/php/demo/server/getCity.json" data-jsonp="true" class="sui-tree-group"></div>
                </form>
              </div>
            </div>
            <div id="code1" class="tab-pane">
              <pre data-target="#demo1&gt;div" class="prettyprint linenums"></pre>
            </div>
            <div id="doc1" class="tab-pane">
              <code>data-toggle='tree'</code>通过在元素上加此属性自动初始化，并生成第一个select，必须在初始化之前指定数据源<br>
              <code>data-src="url"</code>  通过ajax或jsonp方式获取数据的url<br>
              <code>data-jsonp="true"</code>  为true表示src的url为垮域请求，会以jsonp的形式发送<br>
              <code>data-val="[x,y,z]"</code>  初始化的时候的初始值，注意xyz的值必须要能在srouce对象中找到<br>
            </div>
            <div id="api1" class="tab-pane">
              <code>$(element).data('tree').datas</code>，element为<code>data-toggle='tree'</code>的元素，获取当前的值对象，格式为{value : [], option : []}，value代表select的value值，option表示显示的option的文字<br>
              <code>$(element).tree('setValue', [x,y,z])</code>  设置tree的值，参数同初始化的data-val相同
            </div>
          </div>
          <h1>2. select，通过js调用初始化</h1>
          <ul class="sui-nav nav-tabs nav-large">
            <li class="active"><a href="#demo2" data-toggle="tab">示例</a></li>
            <li><a href="#code2" data-toggle="tab">代码</a></li>
            <li><a href="#doc2" data-toggle="tab">文档</a></li>
            <li><a href="#api2" data-toggle="tab">API</a></li>
          </ul>
          <div class="tab-content">
            <div id="demo2" class="tab-pane active">
              <div class="bs-docs-example">
                <div id="treeGroup2" class="sui-tree-group sui-form"></div>
                <script>
                  $(function() {
                      $('#treeGroup2').tree({
                          src : 'http://10.68.111.150/php/demo/server/getCategory.json',
                          placeholder : '-- 请选择 --',
                          val : [2, 148, 152],
                          jsonp : true
                      });
                  })
                </script>
              </div>
            </div>
            <div id="code2" class="tab-pane">
              <pre data-target="#demo2&gt;div" class="prettyprint linenums"></pre>
            </div>
            <div id="doc2" class="tab-pane">
              手动调用tree方法，并传入参数<br>
              返回数据的格式：<br>
              <pre class="prettyprint">{
  "code" : 200, // 代表请求成功
  "data" : [
    {
      "id" : "id", // id值，用于option的value
      "value" : "value", // 显示的内容，用于option的text
      "parent" : "parent", // 父节点的id，暂无用途
      "isleaf" : "false", // 是否是叶结点，如果为false，则选中此项的时候会根据id获取子节点的数据
    },
    {...},
    ...
  ]
}</pre>
            </div>
            <div id="api2" class="tab-pane">
              <table class="sui-table table-bordered">
                <thead>
                  <tr>
                    <th style="width:100px">名称</th>
                    <th style="width:50px">类型</th>
                    <th style="width:50px">默认值</th>
                    <th>描述</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>src</td>
                    <td>string</td>
                    <td>null</td>
                    <td>通过ajax获取数据的url</td>
                  </tr>
                  <tr>
                    <td>jsonp</td>
                    <td>boolean</td>
                    <td>false</td>
                    <td>表示src请求是一个jsonp请求</td>
                  </tr>
                  <tr>
                    <td>key</td>
                    <td>string</td>
                    <td>"id"</td>
                    <td>发送请求时获取数据的参数名，默认为id</td>
                  </tr>
                  <tr>
                    <td>placeholder</td>
                    <td>string</td>
                    <td>"请选择"</td>
                    <td>默认的第一个option，可以传null或空串，则不会出现默认的option</td>
                  </tr>
                  <tr>
                    <td>val</td>
                    <td>Array</td>
                    <td>[]</td>
                    <td>初始化的值，是一个数组，里面的值是option的value值</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="footer">
            <ul class="unstyled">
              <li>@time 2014.03.07</li>
              <li>@author 商家业务事业部-电商服务支撑平台-UED团队</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/zeroclipboard/ZeroClipboard.js"></script>
    <script src="assets/js/application.js"></script>
    <script src="http://localhost:3456/livereload.js"></script>
  </body>
</html>